<template>
    <div class="unit-selector-container">
        <div class="unit-selector-content">
            <!-- 左侧预设单位区域 -->
            <div class="preset-units">
                <div class="unit-header">
                    <el-checkbox v-model="usePresetUnit">预设单位</el-checkbox>
                </div>
                <div class="unit-categories">
                    <!-- 行政办公等 -->
                    <div class="unit-category">
                        <div class="category-name">行政办公等</div>
                        <div class="unit-options">
                            <el-radio v-model="selectedUnit" label="m³/(人·a)" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/(人·a)</el-radio>
                        </div>
                    </div>

                    <!-- L电力制造 -->
                    <div class="unit-category">
                        <div class="category-name">电力制造</div>
                        <div class="unit-options">
                            <el-radio v-model="selectedUnit" label="m³/万kW" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/万kW</el-radio>
                            <el-radio v-model="selectedUnit" label="m³/kVAh" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/kVAh</el-radio>
                            <el-radio v-model="selectedUnit" label="m³/KV" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/KV</el-radio>
                            <el-radio v-model="selectedUnit" label="m³/(MW·h)" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/(MW·h)</el-radio>
                        </div>
                    </div>

                    <!-- 制造业通用 -->
                    <div class="unit-category">
                        <div class="category-name">制造业通用</div>
                        <div class="unit-options">
                            <el-radio v-model="selectedUnit" label="m³/t" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/t</el-radio>
                            <el-radio v-model="selectedUnit" label="m³/万件" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/万件</el-radio>
                        </div>
                    </div>

                    <!-- 产值 -->
                    <div class="unit-category">
                        <div class="category-name">产值</div>
                        <div class="unit-options">
                            <el-radio v-model="selectedUnit" label="m³/万元" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/万元</el-radio>
                        </div>
                    </div>

                    <!-- 宾馆住宿 -->
                    <div class="unit-category">
                        <div class="category-name">宾馆住宿</div>
                        <div class="unit-options">
                            <el-radio v-model="selectedUnit" label="m³/(床·a)" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/(床·a)</el-radio>
                        </div>
                    </div>

                    <!-- 其他常用单位 -->
                    <div class="unit-category">
                        <div class="category-name">其他常用单位</div>
                        <div class="unit-options">
                            <el-radio v-model="selectedUnit" label="m³/(m²·a)" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/(m²·a)</el-radio>
                            <el-radio v-model="selectedUnit" label="m³/m" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/m</el-radio>
                            <el-radio v-model="selectedUnit" label="m³/辆" :disabled="!usePresetUnit"
                                @change="handleUnitChange">m³/辆</el-radio>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧自定义单位区域 -->
            <div class="custom-units">
                <div class="unit-header">
                    <el-checkbox v-model="useCustomUnit">自定义单位</el-checkbox>
                </div>
                <div class="custom-unit-content">
                    <div class="custom-unit-formula">
                        <img src="@/assets/unit-formula.svg" alt="">
                    </div>

                    <div class="custom-unit-inputs">
                        <div class="input-row">
                            <label>(a) 选择用水计量单位：</label>
                            <el-select filterable allow-create v-model="customUnit.a" placeholder="选择单位"
                                :disabled="!useCustomUnit">
                                <el-option value="m³" label="m³" />
                                <!-- 升 -->
                                <el-option value="L" label="L"></el-option>
                            </el-select>
                        </div>
                        <div class="input-row">
                            <label>(b) 填写自定义统计单位：</label>
                            <el-input v-model="customUnit.b" placeholder="请输入" :disabled="!useCustomUnit" />
                        </div>
                        <div class="input-row checkbox-row">
                            <el-checkbox v-model="useTimeUnit" :disabled="!useCustomUnit">
                                (c) 选择统计周期单位：
                            </el-checkbox>
                            <el-select v-model="customUnit.c" placeholder="选择单位"
                                :disabled="!useCustomUnit || !useTimeUnit">
                                <el-option value="d">
                                    <div style="display: flex; justify-content: space-between; width: 100%;">
                                        <span>d</span>
                                        <span style="color: #999;">日</span>
                                    </div>
                                </el-option>
                                <el-option value="s">
                                    <div style="display: flex; justify-content: space-between; width: 100%;">
                                        <span>s</span>
                                        <span style="color: #999;">季</span>
                                    </div>
                                </el-option>
                                <el-option value="m">
                                    <div style="display: flex; justify-content: space-between; width: 100%;">
                                        <span>m</span>
                                        <span style="color: #999;">月</span>
                                    </div>
                                </el-option>
                                <el-option value="a">
                                    <div style="display: flex; justify-content: space-between; width: 100%;">
                                        <span>a</span>
                                        <span style="color: #999;">年</span>
                                    </div>
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="time-unit-hint">
                *周期单位对应关系: a — 年; s — 季; m — 月; d — 日
            </div>
            <div class="action-buttons">
                <el-button @click="handleCancel">上一步</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';

// 定义props和emits
const props = defineProps({
    initialUnit: {
        type: String,
        default: ''
    }
});

const emit = defineEmits(['cancel', 'confirm']);

// 是否使用预设单位
const usePresetUnit = ref(true);
// 是否使用自定义单位
const useCustomUnit = ref(false);
// 是否使用时间单位 
const useTimeUnit = ref(false);

// 选中的预设单位
const selectedUnit = ref(props.initialUnit || 'm³/(人·a)');

// 自定义单位
const customUnit = reactive({
    a: 'm³',
    b: '',
    c: 'd'
});

// 计算最终单位
const finalUnit = computed(() => {
    if (usePresetUnit.value) {
        return selectedUnit.value;
    } else if (useCustomUnit.value) {
        if (useTimeUnit.value) {
            return `${customUnit.a}/(${customUnit.b}·${customUnit.c})`;
        } else {
            return `${customUnit.a}/${customUnit.b}`;
        }
    }
    return '';
});

// 监听预设单位和自定义单位的互斥选择
watch(usePresetUnit, (newVal) => {
    if (newVal) {
        useCustomUnit.value = false;
    }
});

watch(useCustomUnit, (newVal) => {
    if (newVal) {
        usePresetUnit.value = false;
    }
});

// 处理预设单位变更
const handleUnitChange = () => {
    // 如果用户选择了预设单位，则禁用自定义单位
    if (selectedUnit.value) {
        usePresetUnit.value = true;
        useCustomUnit.value = false;
    }
};

// 取消
const handleCancel = () => {
    emit('cancel');
};

// 确认选择
const handleConfirm = () => {
    emit('confirm', finalUnit.value);
};
</script>

<style scoped>
.unit-selector-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.unit-selector-content {
    display: flex;
    flex: 1;
    border-bottom: 1px solid #ebeef5;
}

.preset-units,
.custom-units {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--gap-normal);
    overflow-y: auto;
}

.preset-units {
    border-right: 1px solid #ebeef5;
}

.unit-header {
    display: flex;
    justify-content: center;
    margin-bottom: var(--gap-normal);
    font-weight: bold;
}

.unit-category {
    margin-bottom: var(--gap-normal);
}

.category-name {
    margin-bottom: 10px;
    color: #666;
}

.unit-options {
    display: flex;
}

.custom-unit-content {
    margin-top: var(--gap-normal);
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.custom-unit-formula {
    margin-bottom: var(--gap-normal);
}

.formula-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--gap-normal);
}

.formula {
    display: flex;
    align-items: center;
    font-size: 24px;
}

.formula-part {
    margin: 0 5px;
}

.bordered {
    border: 1px dashed #ccc;
    padding: 2px 8px;
}

.formula-description {
    color: #666;
    font-size: 14px;
}

.formula-row {
    margin-bottom: 10px;
}

.custom-unit-inputs {
    margin-top: var(--gap-normal);
}

.input-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--gap-normal);
}

.input-row label {
    flex: 0 0 180px;
}

.checkbox-row {
    align-items: center;
}

.footer {
    padding: var(--gap-normal);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.time-unit-hint {
    color: #999;
    font-size: 12px;
}

.action-buttons {
    display: flex;
    gap: 10px;
}
</style>